<template xmlns="">
  <div class="registerInfo-container">
    <modules-title title-name="财务查询">
      <template slot="btn">
<!--        <el-button class="border-btn" @click="templateDrug">导出</el-button>-->
      </template>
    </modules-title>
    <div class="main">
      <div class="searchBar">
        <el-form inline :model="storage">
          <el-form-item label="收费日期">
            <el-date-picker
              class="searchBar_picker"
              v-model="date"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              @change="onchange"
              @input="dataIn"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="storage.option_type" @change="oncahngeTy" class="searchBar_select">
              <el-option
                v-for="item in option_typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款方式">
            <el-select v-model="storage.pay_type" @change="oncahngePy" class="searchBar_select">
              <el-option
                v-for="item in pay_typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收费员">
            <el-input
              placeholder="搜索收费员"
              @change="inputNane"
              @keyup.enter.native="userNameKey"
              clearable
              v-model="storage.user_name">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" class="main-btn">查询</el-button>
            <el-button class="border-btn" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-card shadow="never" class="card_n1">
          <div class="box">
            <p class="p1">营业收费</p>
            <ul class="ul">
              <li>
                <p class="p2"><span style="font-size:24px">￥</span>{{total_amount | moneyFormat}}</p>
                <p class="p3">实收</p>
              </li>
              <li>
                <p class="p2"><span style="font-size:24px">￥</span>{{refund_amount | moneyFormat}}</p>
                <p class="p3">退费</p>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card shadow="never" class="card_n2">
          <div class="box">
            <p class="p1">收款方式</p>
            <ul class="ul">
              <li>
                <el-image
                  style="width: 38px; height: 38px"
                  :src="s_3" fit="fit"></el-image>
                <p class="p3">￥{{total_charge[1] | moneyFormat}}</p>
              </li>
              <li>
                <el-image
                  style="width: 38px; height: 38px"
                  :src="s_6" fit="fit"></el-image>
                <p class="p3">￥{{total_charge[2] | moneyFormat}}</p>
              </li>
              <li>
                <el-image
                  style="width: 38px; height: 38px"
                  :src="s_2" fit="fit"></el-image>
                <p class="p3">￥{{total_charge[3] | moneyFormat}}</p>
              </li>
              <li>
                <el-image
                  style="width: 38px; height: 38px"
                  :src="s_5" fit="fit"></el-image>
                <p class="p3">￥{{total_charge[4] | moneyFormat}}</p>
              </li>
              <li>
                <el-image
                  style="width: 38px; height: 38px"
                  :src="s_1" fit="fit"></el-image>
                <p class="p3">￥{{total_charge[5] | moneyFormat}}</p>
              </li>
<!--              <li>-->
<!--                <el-image-->
<!--                  style="width: 38px; height: 38px"-->
<!--                  :src="s_4" fit="fit"></el-image>-->
<!--                <p class="p3">￥{{total_charge[0] | moneyFormat}}</p>-->
<!--              </li>-->

            </ul>
          </div>
        </el-card>
        <el-table
          :data="tableData"
          border
          :default-sort="{prop: 'created_at', order: 'descending'}"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column label="收费日期" prop="detail_at" sortable align="center">
            <template #default="{row}">
              {{row.created_at | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template #default="{row}">
              <span v-if="row.option_type === 1">收费</span>
              <span v-else-if="row.option_type === 2">退费</span>
            </template>
          </el-table-column>
          <el-table-column label="患者姓名" prop="real_name" align="center"></el-table-column>
          <el-table-column label="电话" prop="mobile" align="center"></el-table-column>
          <el-table-column label="实收金额" align="center">
            <template #default="{row}">
              <span class="price">￥ {{row.receipts_amount | moneyFormat}}</span>
            </template>

          </el-table-column>
          <el-table-column label="付款方式" align="center">
            <template #default="{row}">
              <span v-if="row.pay_type === 1">现金</span>
              <span v-else-if="row.pay_type === 2">支付宝</span>
              <span v-else-if="row.pay_type === 3">微信</span>
              <span v-else-if="row.pay_type === 4">医保卡</span>
            </template>
          </el-table-column>
          <el-table-column label="收费员名称" prop="user_name" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{row}">
              <el-button type="text" @click="toDetail(row.charge_id)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="storage.pager.number"
          :page-sizes="[5,10, 20, 30, 50]"
          :page-size="storage.pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {getFinancialQuery} from '@/api/statistical';

  export default {
    name: "financialQuery",
    data() {
      return {
        s_3: require("../../../assets/img/statistical/s_3.png"),
        s_6: require("../../../assets/img/statistical/s_6.png"),
        s_2: require("../../../assets/img/statistical/s_2.png"),
        s_5: require("../../../assets/img/statistical/s_5.png"),
        s_1: require("../../../assets/img/statistical/s_1.png"),
        s_4: require("../../../assets/img/statistical/s_4.png"),
        date: '',
        storage: {//入库
          start_time: '',
          end_time: '',
          pay_type: 0,
          user_name: '',
          option_type: 0,
          pager: {
            number: 1,
            size: 5
          }
        },
        option_typeList: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '收费'
          },
          {
            value: 2,
            label: '退费'
          },
        ],
        pay_typeList: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '现金'
          },
          {
            value: 2,
            label: '支付宝'
          },
          {
            value: 3,
            label: '微信'
          },
          {
            value: 4,
            label: '银行卡'
          },
          {
            value: 5,
            label: '医保卡'
          },
        ],
        total_amount: 0,
        refund_amount: 0,
        total: 0,
        total_charge: {},
        tableData: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      var date = new Date();
      var year = date.getFullYear()
      var month = date.getMonth() + 1;
      month = (month < 10 ? '0' + month : month)
      var day = date.getDate();
      day = (day < 10 ? '0' + day : day)
      this.storage.start_time = this.storage.end_time = `${year.toString()}-${month.toString()}-${day.toString()}`
      this.date = [this.storage.start_time, this.storage.end_time]
      this.getFinancialQueryData()
    },
    mounted() {
    },
    methods: {
      //时间事件
      onchange(e) {
        if(e!==null){
          this.storage.start_time = e[0]
          this.storage.end_time = e[1]
        }
      },
      //input
      dataIn(e) {
        this.$nextTick(() => {
          if (e == null) {
            this.storage.start_time = ''
            this.storage.end_time = ''
            this.storage.pager.number = 1
            this.getFinancialQueryData()
          } else {
            this.$set(this, "date", [e[0], e[1]]);
            this.storage.start_time = e[0]
            this.storage.end_time = e[1]
            this.storage.pager.number = 1
            this.getFinancialQueryData()
          }
        })
      },
      //类型事件
      oncahngeTy(e) {
        this.storage.option_type = e
        this.storage.pager.number = 1
        this.getFinancialQueryData()
      },
      //支付方式事件
      oncahngePy(e) {
        this.storage.pay_type = e
        this.storage.pager.number = 1
        this.getFinancialQueryData()
      },
      //收费员事件
      inputNane(e) {
        this.$nextTick(_ => {
          if (e === null) {
            this.storage.user_name = ''
            this.storage.pager.number = 1
            this.getFinancialQueryData()
          } else {
            this.storage.user_name = e
            this.storage.pager.number = 1
            this.getFinancialQueryData()
          }
        })
      },
      //收费员回车
      userNameKey(e) {
        let keyCode = window.event ? e.keyCode : e.which
        if (keyCode === 13 && this.storage.user_name) {
          this.storage.pager.number = 1
          this.getFinancialQueryData()
        }
      },
      //查询
      search() {
        this.storage.pager.number = 1
        this.getFinancialQueryData()
      },
      //重置
      reset() {
        this.date = ''
        this.storage = {//入库
          start_time: '',
          end_time: '',
          pay_type: 0,
          user_name: '',
          option_type: 0,
          pager: {
            number: 1,
            size: 5
          }
        }
        this.storage.pager.number = 1
        this.getFinancialQueryData()
      },
      //获取数据
      getFinancialQueryData() {
        getFinancialQuery(this.storage).then(res => {
          if (res.code === 200) {
            this.total = res.data.total
            this.total_amount = res.data.total_amount
            this.refund_amount = res.data.refund_amount
            this.total_charge = res.data.total_charge
            this.tableData = res.data.data || []
          }
        })
      },
      //条数
      handleSizeChange(val) {
        this.storage.pager.size = val
        this.getFinancialQueryData()
      },
      //页码
      handleCurrentChange(val) {
        this.storage.pager.number = val
        this.getFinancialQueryData()
      },
      //详情
      toDetail(id) {
        this.$router.push(
          {
            path: '/statistical/financialQuery/detail/',
            query: {id: id}
          }
        )
      },
      //导出
      async templateDrug() {
        // const res =await exportPutDownload();
        // const link = document.createElement("a");
        // let blob = new Blob([res], {
        //   type:
        //     "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        // });
        // link.style.display = "none";
        // link.href = URL.createObjectURL(blob);
        // link.download = '入库日志';
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/assets/scss/statistical/financialQuery.scss";
</style>
